import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { DragSource } from 'react-dnd';

const style = {
  marginBottom:'0.6vh',
  marginLeft:'1.5vw',
  width: '100%',
  cursor: 'move',
  float: 'left',
  fontSize:'14px',
  color:'#444444',
  fontWeight:'400',
};

const boxSource = {
  beginDrag(props) {
    return {
      name: props.name,
    }
  },
};

class Box extends Component {
  static propTypes = {
    connectDragSource: PropTypes.func.isRequired,
    isDragging: PropTypes.bool.isRequired,
    name: PropTypes.string.isRequired,
    type: PropTypes.string.isRequired,
    isDropped: PropTypes.bool.isRequired,
  };

  render() {
    const { name, isDropped, isDragging, connectDragSource } = this.props
    const opacity = isDragging ? 0.4 : 1;

    return connectDragSource(
      <div style={{ ...style, opacity }}>
        {isDropped ? <s>{name}</s> : name}
      </div>
    )
  }
}

export default DragSource(props => props.type, boxSource, (connect, monitor) => ({
  connectDragSource: connect.dragSource(),
  isDragging: monitor.isDragging(),
}))(Box);
